<!-- 用户中心 -->
<template>
  <div class="container">
    <div v-show="isEdit" class="tcommonBox">
      <header>
        <h1>
          编辑个人资料
        </h1>
      </header>
      <section>
        <ul class="userInfoBox">
          <li class="avatarlist">
            <span class="leftTitle">头像</span>
            <el-upload
              class="avatar-uploader"
              name="img"
              :action="uploadURL"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
              <img   v-if="userInfoObj.avatar" :src="userInfoObj.avatar?userInfoObj.avatar:'static/img/tou.jpg'"  :onerror="$store.state.errorImg" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              <div slot="tip" class="el-upload__tip">点击上传头像，只能上传jpg/png文件，且不超过1mb</div>
            </el-upload>
          </li>
          <li class="username">
            <span class="leftTitle">昵称</span>
            <el-input v-model="userInfoObj.nickName" placeholder="昵称"></el-input> <i  class="fa fa-wa fa-asterisk"></i>
          </li>
          <li>
            <span class="leftTitle">手机号码</span>
            <el-input v-model="userInfoObj.phonenumber" placeholder="电话号码"></el-input> <i  class="fa fa-wa fa-asterisk"></i>
          </li>
          <li>
            <span class="leftTitle">省份</span>
            <el-select v-model="userInfoObj.province"
                       @change="provinceChange($event)">
              <el-option v-for="(item, index) in province"
                         :key="index"
                         :value="item.name">{{ item.name }}</el-option>
            </el-select>
            <span class="citySelect">城市</span>
            <el-select v-model="userInfoObj.city">
              <el-option v-for="(item, index) in citys"
                         :key="index"
                         :value="item.name">{{ item.name }}</el-option>
            </el-select>
          </li>
          <li>
            <span class="leftTitle">个性签名</span>
            <el-input type="text"
                      v-model="userInfoObj.perSign"
                      placeholder="个性签名"
                      maxlength="30"
                      show-word-limit
                      style="max-width: 500px;"></el-input>
          </li>
          <li>
            <span class="leftTitle">性别</span>
            <template>
              <el-radio class="radio" v-model="userInfoObj.sex" label="0">男</el-radio>
              <el-radio class="radio" v-model="userInfoObj.sex" label="1">女</el-radio>
            </template>
          </li>
        </ul>
        <div class=" saveInfobtn">
          <a class="tcolors-bg"  href="javascript:void(0);" @click="cancel">返 回</a>
          <a class="tcolors-bg" href="javascript:void(0);" @click="saveInfoFun">保 存</a>
        </div>
      </section>
    </div>
    <div v-show="!isEdit" class="tcommonBox">
      <header>
        <h1>
          个人中心
          <span class="gotoEdit" @click="isEdit=!isEdit"><i class="fa fa-wa fa-edit"></i>编辑</span>
        </h1>
      </header>
      <section>
        <ul class="userInfoBox">
          <li class="avatarlist">
            <span class="leftTitle">头像</span>
            <div class="avatar-uploader">
              <img  :src="userInfoObj.avatar?userInfoObj.avatar:'static/img/tou.jpg'"   :onerror="$store.state.errorImg" class="avatar">
            </div>
          </li>
          <li class="username">
            <span class="leftTitle">昵称</span>
            <span>{{userInfoObj.nickName?userInfoObj.nickName:"无"}}</span>
          </li>
          <li>
            <span class="leftTitle">电子邮件</span>
            <span>{{userInfoObj.email?userInfoObj.email:"无"}}</span>
          </li>
          <li>
            <span class="leftTitle">电话号码</span>
            <span>{{userInfoObj.phonenumber?userInfoObj.phonenumber:"无"}}</span>
          </li>
          <li>
            <span class="leftTitle">居住地址</span>
            <span>{{userInfoObj.province?userInfoObj.province:"无"}}</span>
            <span class="citySelect">{{userInfoObj.city?userInfoObj.city:""}}</span>
          </li>
          <li>
            <span class="leftTitle">个性签名</span>
            <span>{{userInfoObj.perSign?userInfoObj.perSign:"无"}}</span>
          </li>
          <li>
            <span class="leftTitle">性别</span>
            <span>{{userInfoObj.sex==0?'男':'女'}}</span>
          </li>
        </ul>
      </section>
    </div>
  </div>
</template>

<script>
  import {getUserInfo, savaUserInfo} from '../api/user.js' //获取用户信息，保存用户信息
  import store from '../store'
  import Nav from "../components/Nav";

  export default {
        name: 'UserInfo',
        data() { //选项 / 数据
            return {
                uploadURL:'',
                isEdit: false,
                userInfo:{},//本地存储的用户信
                userInfoObj:{
                },//用户的信息
                cities:[],
                province: [],
                citys:[],
                isFirst : true
            }
        },
        methods: { //事件处理器
            handleAvatarSuccess(res, file) {//上传头像
                if(res.code === 200){
                    this.userInfoObj.avatar = res.data;
                    this.userInfoObj.head_start = 1;
                }else{
                    this.$message.error('上传图片失败');
                }

            },
          provinceChange(that){
            // 根据选中省，匹配市
            let cityCode = 0
            this.province.forEach((item,index)=>{
              if(item.name === that){
                cityCode = item.province
              }
            })
            if(cityCode){
              this.citys = []
              this.cities.forEach((item,index)=>{
                if(item.province === cityCode){
                  this.citys.push(item)
                }
              })  /* 市匹配成功*/
            }
          },
            beforeAvatarUpload(file) {//判断头像大小
                const isJPG = file.type == 'image/png'||file.type=='image/jpg'||file.type=='image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 1;
                // console.log(file);
                if (!isJPG) {
                  this.$message.error('上传头像图片只能是 JPG/JPEG/PNG 格式!');
                }
                if (!isLt2M) {
                  this.$message.error('上传头像图片大小不能超过 1MB!');
                }
                return isJPG && isLt2M;
            },
            cancel() {
              this.isEdit = false
              this.routeChange()
            },
            saveInfoFun: function(){//保存编辑的用户信息
                var that = this;

                if(!that.userInfoObj.nickName){ //昵称为必填
                     that.$message.error('昵称为必填项，请填写昵称');
                     return;
                }
                if(this.qualityDesc(that.userInfoObj.perSign)>60){
                  that.$message.error('字数不能大于30');
                  return;
                }
                savaUserInfo(that.userInfoObj).then((response)=>{//保存信息接口，返回展示页
                    that.$message.success( '保存成功！');
                    that.isEdit = false;
                    localStorage.setItem("userInfo",JSON.stringify(that.userInfoObj))
                    that.routeChange() ;
                })
            },
            qualityDesc: function(value){//计算输入字数
              return value.match(/[^ -~]/g) === null ? value.length : value.length + value.match(/[^ -~]/g).length;
            },
            routeChange: function(){//展示页面信息
                // console.log(this.$router,this.$route);
                if(localStorage.getItem('userInfo')){
                    this.haslogin = true;
                    this.userInfo = JSON.parse(localStorage.getItem('userInfo'));
                    this.userId = this.userInfo.id;
                    getUserInfo(this.userId).then((response)=>{
                        this.userInfoObj = response;
                        this.userInfoObj.head_start = 0;
                    })
                }else{
                    this.haslogin = false;
                }

            }
        },
        components: { //定义组件
            'wbc-nav':Nav,
        },
        watch: {
           // 如果路由有变化，会再次执行该方法
            citys:{
             immediate : false,
              handler(){
               if(this.citys[0]===undefined){
                 this.userInfoObj.city = ''
               }else{
                 this.userInfoObj.city = this.citys[0].name
               }
              }
            }
         },
        created() { //生命周期函数
            // const { province, city } = require('province-city-china/data');
            this.province = require('province-city-china/dist/province.json')
            this.cities = require('province-city-china/dist/city.json')
            document.title = "用户中心";
            this.routeChange();
            this.provinceChange(this.userInfo.province)
            this.uploadURL = store.state.baseURL+'upload'
        }
    }
</script>

<style>
  .tcommonBox{
    white-space: normal;
    word-wrap: break-word;
    word-break: break-all;
    position: relative;
    background-image: linear-gradient(to top, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%);
    padding:45px;
    border-radius: 30px;
    font-size: 15px;
    box-shadow: 0 0 15px #b6b5b5;
  }
.userInfoBox .avatarlist{
    position: relative;
}
.citySelect{
  width: 80px;
  display: inline-block;
  padding: 10px;
}
.avatar-uploader {
    display: inline-block;
    vertical-align: top;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 120px;
    height: 120px;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #20a0ff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
    position: absolute;
    top:0;
    left:0;
  }
  .avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    display: block;
    object-fit: cover;
  }
.gotoEdit{
    font-size: 15px;
    float:right;
    cursor: pointer;
    color:#999;
}
.gotoEdit:hover {
    color:#333;
}
/*个人设置*/
.userInfoBox .leftTitle{
    display: inline-block;
    width:100px;
    padding: 10px 0;
}
.userInfoBox .rightInner{
    display: inline-block;
    max-width: calc(100% - 140px);
    vertical-align: top;
}
.userInfoBox li{
    padding:20px;
    border-bottom: 1px solid #ddd;
}
.userInfoBox li:last-child{
    border-bottom: 1px solid transparent;
}
.userInfoBox  .el-input,.userInfoBox  .el-textarea{
    max-width:300px;
    min-width: 100px;
}

.userInfoBox .el-input__inner{
    border-radius: 4px;
}
.userInfoBox  .el-textarea{
    vertical-align: top;
}
.saveInfobtn{
    margin: 20px 0;
    text-align: center;
}
.saveInfobtn a{
    color:#fff;
    padding:6px 20px;
    margin:5px 10px;
    border-radius: 5px;
    font-size: 14px;
}
.userInfoBox .fa-asterisk{
    color: #DF2050;
}
</style>
